<template>
    <div>
        <el-row>
            <el-col :span="24" style="text-align: right">
                <el-button type="primary" @click="merchantsAdd">创建商户号</el-button>
            </el-col>
        </el-row>
        <!-- 详情说明  -->
        <div class="info">
            <p>一个商户号可关联多个门店进行收款，创建后，请至门店管理进行配置，支付参数请联系管理员获取</p>
        </div>

        <!--表格开始-->
        <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-top: 15px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column label="商户名称" prop="warehouse_name"></el-table-column>
            <el-table-column label="商户号类型" prop="create_username"></el-table-column>
            <el-table-column label="商户号" prop="create_time"></el-table-column>
            <el-table-column label="启用状态" prop="audit_username"></el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary">编辑</el-button>
                    <el-button size="mini" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <Pagination @handleClickPage="currentPage" :total="total"></Pagination>

        <!--创建商户号的dialog-->
        <el-dialog
                :visible.sync="dialogAdd"
                width="50%"
                @close="dialogAddClose">
            <!--这里的插槽会替换title显示的内容-->
                    <div slot="title" class="header-title">
                        <p class="title-name">创建商户号</p>
                        <p class="title-info">应用于门店支付商户号之前需要先创建商户号</p>
                    </div>
            <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px">
                <el-form-item label="定义名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请定义商户名称"  style="width: 304px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogAddSure">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Pagination from '../../components/pagination'
    export default {
        name: "pay-setting",
        data () {
            return {
                tableData: [],
                loading: false,
                total: 0,
                page: 1, // 页数
                dialogAdd: false,
                addForm: {

                },
                addRules: {
                    name: [
                        { required: true, message: '请定义商户名称', trigger: 'blur' },
                    ],
                },
            }
        },
        created() {

        },
        methods: {
            // 分页的 当前点击的页数
            currentPage(newPage) {
                console.log(`当前页: ${newPage}`)
                this.page = newPage
                this.loading = true
                // this._procurementList() // 获取礼品分类列表
            },
            merchantsAdd() {
                this.dialogAdd = true
            },
            dialogAddClose() {},
            dialogAddSure() {}
        },
        components: {
            Pagination
        }
    }
</script>

<style scoped lang="scss">
    .info {
        margin: 15px 0 20px 0;
        padding: 5px 20px;
        background-color: #E9F6FF;
        font-size: 12px;
        border-radius: 4px;
    }
    .header-title {
        .title-name {
            font-size: 18px;
            color: #333;
            font-weight: 600;
            margin-bottom: 0;
        }
        .title-info {
            font-size: 11px;
            color: #7d7d7d;
            margin-bottom: 0;
            margin-top: 4px;
        }
    }
</style>
